import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Platform,
  ListView,
  RefreshControl,
  InteractionManager,
} from 'react-native';
import PxToDp from '../../utils/PxToDp';
import OtherCustomerItem from '../../containers/OtherCustomerContainers';
import Loading from '../Public/Loading';
import EmptyDataPage from '../Public/EmptyDataPage';
import LoadMoreFooter from './LoadMoreFooter';
import { fetchOtherList } from '../../actions/SaleListActions';
import { fetchFilterOther } from '../../actions/SaleChanceFilterAction';

let otherIsLoading = true;
let otherLoadMore = false;
let otherPageIndex = 1;
const otherPageSize = 10;
let otherList = [];

class OtherCustomer extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
      dataSource: ds,
    };
  }

  onRefresh() {
    otherPageIndex = 1;
    otherIsLoading = true;
    otherLoadMore = false;
    otherList = [];
    const { dispatch } = this.props;
    dispatch(fetchOtherList(otherPageIndex, otherIsLoading, otherLoadMore, 1, 0, 0, 0, 0));
    const FilterObjOther = {};
    dispatch(fetchFilterOther(FilterObjOther)); // 选中的筛选项
  }

  onEndReached() {
    // ListView滚动到底部，根据是否正在加载更多 是否正在刷新 是否已加载全部来判断是否执行加载更多
    if (otherList.length >= this.props.otherListCount || this.props.otherIsLoading) {
      otherLoadMore = false;
      return;
    }
    otherLoadMore = true;
    InteractionManager.runAfterInteractions(() => {
      this.loadMoreDataOther();
    });
  }
  loadMoreDataOther() {
    const { dispatch } = this.props;
    otherPageIndex = Number.parseInt(otherList.length / otherPageSize, 10) + 1;
    otherIsLoading = false;
    dispatch(fetchOtherList(otherPageIndex, otherIsLoading, otherLoadMore, 1, 0, 0, 0, 0));
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchOtherList(otherPageIndex, otherIsLoading, otherLoadMore, 1, 0, 0, 0, 0));
  }
  render() {
    otherList = this.props.otherData;
    return (
      <View style={[style.wrapper, style.flex]}>
        {
            this.props.otherIsLoading ?
              <Loading /> :
              otherList && otherList.length > 0
              ?
                <ListView
                  dataSource={this.state.dataSource.cloneWithRows(otherList)}
                  enableEmptySections
                  onEndReachedThreshold={10}
                  renderRow={rowData => (
                    <OtherCustomerItem
                      navigator={this.props.screenProps}
                      saleData={rowData}
                    />)
                  }
                  onEndReached={() => this.onEndReached()}
                  refreshControl={
                    <RefreshControl
                      refreshing={this.props.otherIsLoading}
                      onRefresh={() => this.onRefresh()}
                      tintColor="gray"
                      color={[style.white, style.white, style.white]}
                      progressBackgroundColor="gray"
                    />
                  }
                  renderFooter={() => {
                    if (otherList) {
                      if (otherList.length < 1 || this.props.otherIsLoading) {
                        return null;
                      }
                    }
                    const isLoadAll = otherList.length < this.props.otherListCount;
                    return (<LoadMoreFooter
                      navigator={this.props.navigation}
                      isLoadAll={isLoadAll}
                    />);
                  }
                }
                />
              :
                <EmptyDataPage />
        }
      </View>
    );
  }
}

const style = StyleSheet.create({
  wrapper: {
    marginTop: Platform.OS === 'ios' ? PxToDp(3) : 0,
    backgroundColor: '#F5F5F5',
  },
  flex: {
    flex: 1,
  },
  white: {
    color: '#FFFFFF',
  },
});
export default OtherCustomer;
